<template>
  <div class="BAC-main">
    <div class="BAC-title">水上桥区管控专题</div>
    <!-- <div class="BAC-content">
      <router-view />
    </div>
    <van-tabbar v-model="active" route z-index="0">
      <van-tabbar-item
        v-for="(item, index) in iconList"
        :key="index"
        :to="item.toRouter"
      >
        <span>{{ item.name }}</span>
        <template #icon="props">
          <img :src="props.active ? item.active : item.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar> -->
    <div class="BAC-content">
      <div class="demonstration-plot">
        <div class="name">
          中山先行示范区
          <img src="../../static/images/bridgeAreaControl/go-icon.png" alt="">
        </div>
        <div class="see" @click="router.push({ path: '/demonstrationPlot' })">立即查看</div>
      </div>
      <div class="title">应用专栏</div>
      <div class="list">
        <div class="item" @click="router.push({ path: '/dailyManagement' })">
          <div class="icon">
            <img src="../../static/images/bridgeAreaControl/column-one-icon.png" alt="">
          </div>         
          <div class="item-title">
            <div>桥区日常管理</div>
            <img src="../../static/images/bridgeAreaControl/go-black-icon.png" alt="">
          </div>
        </div>
        <div class="item" @click="router.push({ path: '/caseAnalysis' })">
          <div class="icon">
            <img src="../../static/images/bridgeAreaControl/column-two-icon.png" alt="">
          </div>          
          <div class="item-title">
            <div>事故案例情况</div>
            <img src="../../static/images/bridgeAreaControl/go-black-icon.png" alt="">
          </div>
        </div>
      </div>
      <div class="title">桥区一览图</div>
      <div class="map">
        <OlArc></OlArc> 
        <!-- 统计 -->
        <div class="count">
          <div class="count-item">
            <div class="value">{{ BgAndWyData.hdMile?.toString() || "--" }}公里</div>
            <div class="name">航道里程数</div>
          </div>
          <div class="count-item">
            <div class="value">{{ BgAndWyData.totalBridge?.toString() || "--" }}座</div>
            <div class="name">桥梁总数</div>
          </div>
        </div>  
        <!-- 进入一览页 -->
        <div class="goto" @click="handleGo()">
          <img src="../../static/images/bridgeAreaControl/goto-icon.png" alt="">
        </div>     
        <!-- 图例 -->
        <div class="overall-legend">
          <div class="overall-legend-item">
            <img src="../../static/images/bridgeAreaControl/dabiaoQl.png" alt="" />
            净高已达标桥梁
          </div>
          <div class="overall-legend-item">
            <img src="../../static/images/bridgeAreaControl/dabiaoBQl.png" alt="" />
            净高未达标桥梁
          </div>
        </div>
        <!-- 天气 -->
        <div class="overall-weather" @click="clickWeather()">
          <img src="../../static/images/bridgeAreaControl/icon_tianqi.png" alt="" />
        </div>
      </div>      
    </div>    
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import active0 from "../../static/images/bridgeAreaControl/tabs1.png";
import inactive0 from "../../static/images/bridgeAreaControl/tabs1n.png";
import active1 from "../../static/images/bridgeAreaControl/tabs2.png";
import inactive1 from "../../static/images/bridgeAreaControl/tabs2n.png";
import active2 from "../../static/images/bridgeAreaControl/tabs3.png";
import inactive2 from "../../static/images/bridgeAreaControl/tabs3n.png";
import active3 from "../../static/images/bridgeAreaControl/tabs4.png";
import inactive3 from "../../static/images/bridgeAreaControl/tabs4n.png";
const iconList = ref([
  {
    name: "总体概况",
    active: active0,
    inactive: inactive0,
    toRouter: "/bridgeAreaControl-overall",
  },
  {
    name: "桥梁情况",
    active: active1,
    inactive: inactive1,
    toRouter: "/bridgeAreaControl-bridge",
  },
  {
    name: "航道情况",
    active: active2,
    inactive: inactive2,
    toRouter: "/bridgeAreaControl-channel",
  },
  {
    name: "船舶情况",
    active: active3,
    inactive: inactive3,
    toRouter: "/bridgeAreaControl-ship",
  },
]);
const active = ref(0);

const router = useRouter();

//地图
import OlArc from "./component/map.vue";

import {
  getBgAndWy,
} from "../../utils/bridgeAreaControlApi";

//获取数据
const BgAndWyData = ref({});
const getBgAndWyDataFn = () => {
  getBgAndWy().then((res) => {
    if (res.code === 200 && res.data) {
      BgAndWyData.value = res.data;
    }
  })
};

//一览页
const handleGo = () => {
  router.push({
    path: "/bridgeAreaControl-overall",
  });
};

//天气
const clickWeather = () => {
  router.push({
    path: "/bridgeAreaControl-weather",
  });
};

onMounted(() => {
  document.title = "水上桥区管控";
  getBgAndWyDataFn();
});
</script>

<style lang="scss" scoped>
.BAC-main {
  position: relative;
  .BAC-title {
    height: 68px;
    width: 100%;
    font-size: 24px;
    line-height: 68px;    
    color: #FFFFFF;
    text-align: center;
    // position: absolute;
    // top: 0;
    // left: 0;
    z-index: 10;
    background: url('../../static/images/bridgeAreaControl/bg_zhuanti.png') no-repeat;
    background-size: cover;
    font-weight: 500;
  }
  .BAC-content {
    position: absolute;
    top: 68px;
    left: 0;
    width: 100%;
    // height: calc(100vh - 50px - 68px);
    z-index: 1;
    background-color: #FFFFFF;
    .demonstration-plot{
      height: 120px;
      background-image:url('../../static/images/bridgeAreaControl/area-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin: 16px 20px;            
      .name{
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #FFFFFF;
        font-weight: 600;
        padding: 20px 0px 10px 20px;
        img{
          padding-left: 8px;
        }
      }
      .see{      
        width: 60px;  
        font-size: 12px;
        color: #262626;
        font-weight: 400;
        background-color: #FFFFFF;
        margin-left: 20px;
        // padding: 5px 10px;
        text-align: center;
        padding: 2px 4px;
        border-radius: 10px;
      }
    }
    .title{     
      font-size: 18px;
      color: #2A8BFD;
      font-weight: 600;
      margin-left: 20px;
      position: relative;
      padding-left: 10px;
    }
    .title::before{
      content: '';
      background-color: #2A8BFD;
      position: absolute;
      top: 50%;
      left: 0;
      height: 17px;
      width: 4px;
      transform: translateY(-50%);
    }
    .list{
      display: flex;
      justify-content: space-between;
      margin: 8px 20px 16px 20px;
      .item{
        height: 80px;
        width: 49%; 
        border: 1px solid #efefef;
        border-radius: 8px;
        .icon{
          width: 24px;
          height: 24px;
          margin: 16px 0px 8px 16px;
          img{
            width: 24px;
            height: 24px;
          }
        }     
        .item-title{
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: 400;
          font-size: 14px;
          color: #262626;
          margin-left: 16px;
          img{
            width: 8px;
            height: 12px;
            padding-right: 16px;
          }
        }  
      }
      .one{
        background-image:url('../../static/images/bridgeAreaControl/column-one-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .two{
        background-image:url('../../static/images/bridgeAreaControl/column-two-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
    .map{
      height: 300px;
      margin: 8px 20px 20px 20px;
      position: relative;
      .count{
        position: absolute;
        top: 8px;
        left: 8px;
        width: 60px;
        height: 70px;
        background: #FFFFFF;
        border-radius: 4px;
        font-size: 12px; 
        padding: 6px;       
        .count-item{
          margin-bottom: 4px;
          .value{
            color: #262626;
            font-weight: bold;
          }
          .name{
            color: #595959;
            font-weight: 400;
          }
        }        
      }
      .goto{
        position: absolute;
        top: 8px;
        right: 8px;
      }
      .overall-legend {
        position: absolute;        
        left: 8px;
        bottom: 8px;
        background: #FFFFFF;
        border-radius: 4px;
        z-index: 10;
        width: 110px;
        height: 50px;
        padding: 6px;
        box-sizing: border-box;
        .overall-legend-item {
          display: flex;
          align-items: center;
          font-size: 12px;
          img {
            width: 10px;
            height: 12px;
            margin-right: 2px;
          }
        }
        .overall-legend-item:nth-child(2) {
          margin-top: 8px;
        }
      }
      .overall-weather {
        position: absolute;       
        right: 8px;
        bottom: 8px;
        width: 32px;
        height: 32px;
        z-index: 10;
        background-color: #FFFFFF;
        display: flex;
        justify-content: center;
        border-radius: 8px;
        align-items: center;
        img {
          width: 20px;
          height: 16px;
        }
      }
    }
  }
}
</style>
